সিএসএস(৩) মাল্টিপল কলাম লেআউট
আপনি সিএসএস(৩) মাল্টিপল কলাম লেআউট ব্যবহার করে আপনার ওয়েব পেজে সহজে খবরের কাগজের মত একাধিক কলাম লিখতে পারবেনঃ
সিএসএস(৩) মাল্টিপল কলাম প্রোপার্টি
নিম্নের টেবিলে সকল মাল্টিপল কলাম প্রোপার্টিগুলো দেখানো হলঃ
সিএসএস(৩) মাল্টিপল কলাম তৈরি
একটি এলিমেন্টকে কয়টি কলামে বিভক্ত করবে তা column-count প্রোপার্টির দ্বারা নির্ধারণ করা হয়।
নিম্নের উদাহরণে <div> এলিমেন্টের লেখা গুলোকে ৩টি কলামে ভাগ করা হলোঃ
সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-count প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
সিএসএস(৩) এর দুইটি কলামের মাঝে দূরত্ব নির্ধারণ
দুইটি কলামের মাঝে দূরত্ব নির্ধারণ করার জন্য column-gap প্রোপার্টি ব্যবহার করা হয়।
নিম্নের উদাহরণে দুইটি কলামের মাঝে ফাকাস্থান 30px রাখা হয়েছেঃ
সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-gap প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
কলামের মাঝের স্টাইল
দুইটি কলামের মাঝে যেকোন ধরনের স্টাইল দেওয়ার জন্য column-rule-style প্রোপার্টি ব্যবহার করা হয়। ইহা অনেকটাই বর্ডারের মত কাজ করে। আপনি একটি বর্ডারে যে সকল স্টাইল ব্যবহার করতে পারেন ঠিক ঐ সকল স্টাইলই কলামের মাঝে এই প্রোপার্টি দ্বারা ব্যবহার করতে পারবেনঃ
সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule-style: solid; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-style: solid; /* ফায়ারফক্স এর জন্য*/
column-rule-style: solid;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-rule-style প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
দুইটি কলামের মাঝের স্টাইলটির প্রস্থ নির্ধারণ করার জন্য column-rule-width প্রোপার্টি ব্যবহার করা হয়ঃ
সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule-style: solid; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-style: solid; /* ফায়ারফক্স এর জন্য*/
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-width: 1px; /* ফায়ারফক্স এর জন্য*/
column-rule-width: 1px;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-rule-width প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
দুইটি কলামের মাঝের স্টাইলটির কালার নির্ধারণ করার জন্যcolumn-rule-colorপ্রোপার্টি ব্যবহার করা হয়ঃ
সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule-style: solid; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-style: solid; /* ফায়ারফক্স এর জন্য*/
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-width: 1px; /* ফায়ারফক্স এর জন্য*/
column-rule-width: 1px;
-webkit-column-rule-color: teal; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule-color: teal; /* ফায়ারফক্স এর জন্য*/
column-rule-color: teal;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-rule-color প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
column-rule-width, column-rule-style এবং column-rule-color এই তিনটি প্রোপার্টি একত্রে column-rule প্রোপার্টি দ্বারা প্রকাশ করা যায়। অর্থাৎ তিনটি প্রোপার্টির সংক্ষিপ্ত প্রোপার্টি হচ্ছে column-rule প্রোপার্টি।
নিচের উদাহরণে কলামের মাঝে width, style এবং color নির্দেশ করা হয়েছেঃ
সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule: 1px solid teal; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule: 1px solid teal; /* ফায়ারফক্স এর জন্য*/
column-rule: 1px solid teal;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-rule প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
কতগুলো কলাম নিয়ে একটি এলিমেন্ট
আপনি কলামের মাঝে অবস্থিত যে কোনো এলিমেন্ট কয়টি কলাম নিয়ে অবস্থান করবে তা column-span প্রোপার্টি দ্বারা নির্ধারণ করে দিতে পারেন।
নিচের উদাহরণে <h2> এলিমেন্টটি সকল কলামে বিস্তৃত থাকবেঃ
সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-moz-column-gap: 30px; /* ফায়ারফক্স এর জন্য*/
column-gap: 30px;
-webkit-column-rule: 1px solid teal; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-rule: 1px solid teal; /* ফায়ারফক্স এর জন্য*/
column-rule: 1px solid teal;
}
h2 {
-webkit-column-span: all; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
column-span: all;
}
</style>
</head>
<body>
<div class="text">
<h2>সাম্প্রতিক ক্রিকেট</h2>
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-span প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
কলামের প্রস্থ নির্ধারণ
একটি কলামের প্রস্থ কত হবে বা এটি কতটুকু জায়গা দখল করবে তা column-width প্রোপার্টি দ্বারা নির্ধারণ করে দিতে পারেন।
নিম্নের উদাহরণে প্রতিটি কলামের প্রস্থ 120px হবেঃ
সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস(৩) উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-count: 3; /* ফায়ারফক্স এর জন্য*/
column-count: 3;
-webkit-column-width: 120px; /* গুগল ক্রোম, অপেরা ও সাফারির জন্য */
-moz-column-width: 120px; /* ফায়ারফক্স এর জন্য*/
column-width: 120px;
}
</style>
</head>
<body>
<div class="text">
মাশরাফি বিন মর্তুজা (জন্ম: অক্টোবর ৫, ১৯৮৩; নড়াইল জেলা) বাংলাদেশ ক্রিকেট দলের অন্যতম বোলিং
স্তম্ভ ও একদিনের আন্তর্জাতিকে দলের অধিনায়কের দায়িত্ব পালন করছেন। তার ডাক নাম ‘কৌশিক’।
তিনি একজন ডানহাতি ব্যাটসম্যান। তার বোলিংয়ের ধরন ডানহাতি মিডিয়াম পেস বোলার।
বাংলাদেশ জাতীয় দল ছাড়াও তিনি এশিয়া একাদশের একদিনের আন্তর্জাতিক দলে খেলেছেন।
</div>
<p><b>নোটঃ</b>column-width প্রোপার্টি ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে সাপোর্ট করে না।</p>
</body>
</html>
ব্রাউজার সাপোর্ট
Content added || updated By
Read more
